
;(function () {
  const idioms = ['山清水秀', '春暖花开', '厚积薄发', '坐井观天', '步步为营'],
        oCharCellGroup = document.querySelector('.char-cell-group'),
        oBlankDoms = document.querySelectorAll('.blank-cell-group .wrapper'),
        oBlankDomsArr = new Array(oBlankDoms.length);
  
  let charCollection = [], // 单字符数组
      oCharDoms = null, // 字符的dom节点
      charAreas = [], // 保存选项的初始位置
      blankAreas = [], // 保存顶部盒子的位置
      resArr = Array.from(oBlankDomsArr), // 结果
      startX = 0, // 鼠标开始的坐标
      startY = 0,
      cellX = 0, // 当前点击的盒子的坐标
      cellY = 0,
      mouseX = 0, // 鼠标距盒子边框的距离
      mouseY = 0;


  const init = () => {
    charCollection = formatCharsArr(); // 获取字符
    // console.log(charCollection);
    randerDom(); // 渲染dom

    oCharDoms = oCharCellGroup.querySelectorAll('.cell-item .wrapper'); // 获取元素节点
    getAreas(oBlankDoms, blankAreas);
    getAreas(oCharDoms, charAreas); // 保存元素的初始位置
    bindEvent(); // 绑定处理事件
  }

  function randerDom() { // 渲染dom
    let list = '';

    charCollection.forEach((char, item) => {
      list += charCellTpl(char, item);
    })

    oCharCellGroup.innerHTML = list;
  }

  function bindEvent() { // 绑定dom事件处理函数
    let oChar = null;

    for (let i = 0; i < oCharDoms.length; i ++) {
      oChar = oCharDoms[i];

      oChar.addEventListener('touchstart', handlerTouchStart, false);
      oChar.addEventListener('touchmove', handlerTouchMove, false);
      oChar.addEventListener('touchend', handlerTouchEnd, false);
    }
  }

  function handlerTouchStart(e) { // 点击要移动的dom时
    // console.log(this, e);
    // 拿到盒子的宽度 this -> 当前点击的元素
    const boxW = this.offsetWidth,
          boxH = this.offsetHeight,
          boxIndex = Number(this.dataset.index);
    checkRestResult(boxIndex);
    // 拿到当前盒子的坐标
    cellX = this.offsetLeft;
    cellY = this.offsetTop;
    // 拿到当前鼠标的坐标
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    // 获取当前鼠标距离当前盒子的坐标
    mouseX = startX - cellX;
    mouseY = startY - cellY;
    // 设置当前盒子的css属性
    this.style.width = boxW / 10 + 'rem';
    this.style.height = boxH / 10 + 'rem';
    this.style.position = 'fixed';

    setPosition(this, { x: cellX, y: cellY });
  }

  function handlerTouchMove(e) { // 移动中
    e.preventDefault();

    const moveX = e.touches[0].clientX,
          moveY = e.touches[0].clientY;
    // console.log(moveX, moveY);

    // 盒子移动的距离 要减去鼠标距盒子的距离
    cellX = moveX - mouseX;
    cellY = moveY - mouseY;

    setPosition(this, { x: cellX, y: cellY });
  }

  function handlerTouchEnd() { // 移动结束时
    // 获取顶部盒子的宽高
    const blankWidth = oBlankDoms[0].offsetWidth,
          blankHeight = oBlankDoms[0].offsetHeight;
    // 先比较是否是移动到回答的区域
    for (let i = 0; i < blankAreas.length; i ++) {
      // 如果结果数组里面移入的那个有数据就跳过
      if (resArr[i] !== undefined) continue;

      let { startX, startY } = blankAreas[i];

      // 吸附的范围判断
      if ( // 如果移动的x坐标处于盒子的里
        ( // 判断盒子的左上角坐标
          cellX > startX &&
          cellX < startX + blankWidth / 2 &&
          cellY > startY &&
          cellY < startY + blankHeight / 2
        ) ||
        ( // 判断盒子的右上角坐标
          cellX + blankWidth > startX + blankWidth / 2 &&
          cellX + blankWidth < startX + blankWidth &&
          cellY > startY &&
          cellY < startY + blankHeight / 2
        )
      ) {
        setPosition(this, { x: startX, y: startY }); // 设置坐标
        setResArr(this, i); // 保存结果

        // console.log('放入后的检查', resArr);

        if (!resArr.includes(undefined)) {
          setTimeout(() => {
            if (!checkResult()) {
              alert('回答错误!');
            } else {
              alert('回答正确!')
            }
            resetPosition();
          }, 1000)
        }
        return;
      }
    }

    const _index = Number(this.dataset.index),
          charArea = charAreas[_index]; // 拿到当前item对应的初始位置

    setPosition(this, { x: charArea.startX, y: charArea.startY }); // 还原到初始位置
    // resArr[]
  }

  function getAreas(domCollenction, arrWrapper) {  // 保存dom元素的初始位置
    let startX = 0,
        startY = 0,
        oItem = null;
    
    for (let i = 0; i < domCollenction.length; i++) {
      oItem = domCollenction[i];
      startX = oItem.offsetLeft;
      startY = oItem.offsetTop;
    
      arrWrapper.push({
        startX,
        startY
      });
    }
    // console.log(arrWrapper);
  }

  function formatCharsArr() { // 把数据拆成单字数组并打乱顺序
    let _arr = [];

    idioms.forEach(item => {
      _arr = _arr.concat(item.split(''));
    })
    // console.log(_arr);
    return _arr.sort(randomSort);
  }

  function randomSort(a, b) { // 随机排序函数
    return Math.random() > 0.5 ? -1 : 1;
  }

  function charCellTpl(char, index) { // 模板字符串(dom)
    return (
      `
        <div class="cell-item">
          <div class="wrapper" data-index="${ index }">${ char }</div>
        </div>
      `
    );
  }

  function setPosition(el, { x, y }) { // 设置坐标
    el.style.left = x / 10 + 'rem';
    el.style.top = y / 10 + 'rem';
  }

  function resetPosition() { // 还原结果里面的每一项的坐标
    resArr.forEach(item => {
      const el = item.el,
            index = Number(el.dataset.index),
            { startX, startY } = charAreas[index];
      setPosition(el, { x: startX, y: startY });
    })
    // 数据初始化
    resArr = Array.from(oBlankDomsArr); // 结果
    startX = 0; // 鼠标开始的坐标
    startY = 0;
    cellX = 0; // 当前点击的盒子的坐标
    cellY = 0;
    mouseX = 0; // 鼠标距盒子边框的距离
    mouseY = 0;
  }

  function setResArr(el, index) { // 保存结果
    resArr[index] = {
      char: el.innerText,
      index: Number(el.dataset.index),
      el
    }
  }

  function checkResult() {
    let idiom = '';

    resArr.forEach(item => {
      idiom += item.char;
    })
    // console.log(idiom);
    return idioms.find(item => item === idiom);
  }

  function checkRestResult(index) { // 检查结果里是否有目标元素
    // console.log('点击时的检查', index, resArr);
    resArr.forEach((item, i) => {
      if(item !== undefined && item.index === index) {
        // console.log(i)
        resArr.splice(i, 1, undefined);
        return
      }
    })
  }

  init();
})();

